<!-- 账单管理 -->
<template>
	<view class="container">
	    <!-- 蓝色半圆背景 -->
	   <!-- <span class="blue-semicircle"></span> -->
	   <view class="half-circle-wrapper">
	       <view class="half-circle-bg"></view>
	     </view>
	 
	    <!-- 上层圆形图标 -->
	    <view class="circle-icon" ><image src="/static/审核统计.png" style="width: 35px; height: 35px;text-align: center;position: relative;left: 16px;top: 18px;" mode="aspectFit" ></image></view>
	 
	    <!-- 下方长方形区域 -->
	    <view class="rectangle-area">
	      <!-- 大标题 -->
	      <text class="main-title">{{totalMoney.toFixed(2)}}</text>
				<view class="total-money">合计（元）</view>
				<view class="ou-check">
					<u-button type="warning" size="small" text="申请核销" @click="handleto()"></u-button>
				</view>
		  
	      <!-- 一行三列的文字 -->
	      <view class="three-column-text">
	        <text class="column-text">{{accountMoney.toFixed(2)}}</text>
	        <text class="column-text">{{unaccountMoney.toFixed(2)}}</text>
	        <text class="column-text">{{abnormalMoney.toFixed(2)}}</text>
	      </view>
		  <view class="three-column-text1">
		    <text class="column-text1">●已结（元）</text>
		    <text class="column-text2">●未结（元）</text>
		    <text class="column-text3">●异常（元）</text>
		  </view>
	    </view>
			
			
		
		<view class="content1">
			<TopTabBar ref="inputModal" @update:count="handleChild" @update:data="handleDataFromChild" :telephone="phone" :beginTime="beginTime" :endTime="endTime" /> <!-- 引入顶部 Tab 导航栏组件 -->
		</view>
		
		
		<view>
			<view v-for="(item, index) in items" :key="index" class="outer-content-list" >
				<view class="content">
					<view class="content-list">
						<view class="avatar-list">
						<text class="options-yun">运单号</text>
						<!-- <span class="delivery-options" v-if="item.waybillNumber!=null">{{item.waybillNumber}}</span> -->
						<text class="delivery-options1">{{item.waybillNumber}}</text>
						<text class="price" style="text-align: center;position: relative;left: 100px;">费用</text>
						<text class="money" style="position: relative;left: 100px;" v-if="currentIndex===0||currentIndex===1||currentIndex===2">￥{{item.sanbaoCost.toFixed(2)}}</text>
						<text class="money" style="position: relative;left: 100px;" v-if="currentIndex===3">￥{{item.compensate.toFixed(2)}}</text>
						</view>
					</view>
				</view>
			<view class="content-list-1">
				<view class="avatar-list">
				<text class="shipment">货件信息</text>
				<text class="description" v-if="item.description!=null">{{item.description}}</text>
				<text class="algebra" v-if="item.number!=null">{{item.number}}件</text>
				<text class="one"> 1 </text>
				<text class="kg" v-if="item.weight!=null">{{item.weight}}kg</text>
				<text class="meter" v-if="item.volume!=null">{{item.volume}}m³</text>
				</view>
			</view>
			<view class="content-list-3">
				<view class="avatar-list">
				<text class="package">包装内容</text>
				<text class="artNumber" v-if="item.installContent!=null">{{item.installContent}}</text>
				</view>
			</view>
			<view class="content-list-7">
				<view class="avatar-list" style="display: flex;flex-direction: row;width: 35%;align-items: center;">
				<view class="options">送货地址</view>
				<view class="delivery-options" v-if="item.destinationStation!=null">到站:{{item.destinationStation}}<text v-if="item.consigneeDetailedAddress!=null">{{item.consigneeDetailedAddress}}</text></view>
				<view class="delivery-axis"  @click="HeadMap(index,item)"><image src="../../../static/坐标.png"></image></view>
				</view>
			</view>
			<view class="content-list-6">
				<view class="avatar-list">
				<text class="options">收货人</text>
				<text class="delivery-options" v-if="item.putUserName!=null">{{item.putUserName}}</text>
				<text class="delivery-number" v-if="item.putPhone!=null" @click="call(item,index)">{{item.putPhone}}</text>
				<text class="delivery-icon"><image src="../../../static/电话.png"></image></text>
				</view>
			</view>
			<view class="content-list-13">
				<view class="avatar-list13">
				<text class="options">备注说明</text>
				<text class="delivery-options"></text>
				</view>
			</view>
			<div class="end"></div>
			</view>
		</view>
		<BillModal ref="billModal" :businessId="businessId"  @confirm="confirm" :phone="phone"/>
		
		<view>
			<u-modal :show="show" :title="title" class="u-show-list" :showCancelButton="true" @cancel="show=false">
				<view class="u-list">
				<u-checkbox-group placement="column">
					<view v-for="(item, index) in items" :key="index" class="u-outer-content-list" >
						<view><u-checkbox v-model="checked" shape="circle" ></u-checkbox></view>
						<view>
							<view class="u-content">
									<view class="u-content-list">
										<view class="u-avatar-list2">
											<view>
												<text class="u-options-yun">运单号</text>
												<!-- <span class="delivery-options" v-if="item.waybillNumber!=null">{{item.waybillNumber}}</span> -->
												<text class="u-delivery-options1">{{item.waybillNumber}}</text>
											</view>
											<view>
												<view class="u-price" style="text-align: center;">费用</view>
												<text class="u-money" v-if="currentIndex===0||currentIndex===1||currentIndex===2">￥{{item.sanbaoCost.toFixed(2)}}</text>
												<text class="u-money" v-if="currentIndex===3">￥{{item.compensate.toFixed(2)}}</text>
											</view>
										</view>
									</view>
								</view>
							<view class="u-content-list-1">
								<view class="u-avatar-list">
								<text class="u-shipment">货件信息</text>
								<text class="u-description" v-if="item.description!=null">{{item.description}}</text>
								<text class="u-algebra" v-if="item.number!=null">{{item.number}}件</text>
								<text class="u-one"> 1 </text>
								<text class="u-kg" v-if="item.weight!=null">{{item.weight}}kg</text>
								<text class="u-meter" v-if="item.volume!=null">{{item.volume}}m³</text>
								</view>
							</view>
							<view class="u-content-list-3">
								<view class="u-avatar-list">
								<text class="u-package">包装内容</text>
								<text class="u-artNumber" v-if="item.installContent!=null">{{item.installContent}}</text>
								</view>
							</view>
							<view class="u-content-list-7">
								<view class="u-avatar-list" style="display: flex;flex-direction: row;align-items: center;">
								<view class="u-options">送货地址</view>
								<view class="u-delivery-options" v-if="item.destinationStation!=null">到站:{{item.destinationStation}}<text v-if="item.consigneeDetailedAddress!=null">{{item.consigneeDetailedAddress}}</text></view>
								<view class="u-delivery-axis"  @click="HeadMap(index,item)"><image src="../../../static/坐标.png"></image></view>
								</view>
							</view>
							<view class="u-content-list-6">
								<view class="u-avatar-list">
								<text class="u-options">收货人</text>
								<text class="u-delivery-options" v-if="item.putUserName!=null">{{item.putUserName}}</text>
								<text class="u-delivery-number" v-if="item.putPhone!=null" @click="call(item,index)">{{item.putPhone}}</text>
								<text class="u-delivery-icon"><image src="../../../static/电话.png"></image></text>
								</view>
							</view>
							<view class="u-content-list-13">
								<view class="u-avatar-list13">
								<text class="u-options">备注说明</text>
								<text class="u-delivery-options"></text>
								</view>
							</view>
							<div class="end"></div>
								
						</view>
						
					</view>
						</u-checkbox-group>
				</view>
				
			</u-modal>
		</view>
	  </view>
</template>

<script>
	import TopTabBar from '@/pages/components/checkTopTabBar/checkTopTabBar.vue'; 
	import BillModal from '@/pages/components/check/check.vue'; 
	// import {account,getCount} from '@/api/check.js';
	export default {
		components: {
		   TopTabBar,
		   BillModal
		 },
		data() {
			return {
				items:[
					// {putUserName:'小发'},
					// {putUserName:'小发'},
					// {putUserName:'小发'},
					// {putUserName:'小发'},
				],
				req:{},
				endTime:'',
				beginTime:'',
				phone:'',
				unaccountMoney:0,
				totalMoney:0,
				accountMoney:0,
				abnormalMoney:0,
				currentIndex:0,
				show:false,
				title:"申请核销数据"
			}
		},
		onLoad(options) {
			this.phone=options.phone
			this.userId=options.userId
			this.selectedOption=options.selectedOption
		},
		mounted(){
			this.showInputModal();
		},
		
		methods: {
			handleto(){
				uni.navigateTo({
					url: '/pagesA/index/check/apply/apply?phone='+this.phone// 请注意，这里的url应为相对路径，且以'/'开头
				});
			},
			HeadMap(index,item){
				console.log("地图");
				const address=item.consigneeDetailedAddress
				// const latitudeId=item.destinationLatitude
				console.log(latitudeId);
				uni.navigateTo({
					url: '/pagesA/index/map/map?address='+address+'&latitudeId='+latitudeId// 请注意，这里的url应为相对路径，且以'/'开头
				});
			},
			handleChild(data){
				console.log(data);
				this.unaccountMoney=data.unaccountMoney
				this.totalMoney=data.totalMoney
				this.accountMoney=data.accountMoney
				this.abnormalMoney=data.abnormalMoney
			},
			handleDataFromChild(data){
				if(data.items.length===0){
					this.items=[]
				}else{
					this.items=data.items
				}
				// 接收来自子组件的数据
				this.currentIndex = data.currentIndex;
			},
			call(item,index){
				const phoneNumber=item.putPhone
				this.callPhone(phoneNumber)
			},
			callPhone(phoneNumber) {
			        // 检查传入的电话号码是否为空或格式不正确
			        if (!phoneNumber || typeof phoneNumber !== 'string' || !/^\d+$/.test(phoneNumber)) {
			            uni.showToast({
			                title: '电话号码格式不正确',
			                icon: 'none'
			            });
			            return;
			        }
			        // 使用uni.makePhoneCall发起电话拨打请求
			        uni.makePhoneCall({
			            phoneNumber: phoneNumber, // 此处填写要拨打的电话号码
			            success: function () {
			                // 用户确认拨打后，此回调会被触发
			                console.log('用户已确认拨打');
			            },
			            fail: function (err) {
			                // 用户取消拨打或拨打电话失败时，此回调会被触发
			                console.error('拨打电话失败：', err);
			                uni.showToast({
			                    title: '拨打电话失败，请检查您的设置或重试',
			                    icon: 'none'
			                });
			            }
			        });
			    },
				showInputModal(item, index) {
					  this.$refs.billModal.showModal('筛选', {
					    onConfirm: (value) => {
					      console.log('用户输入:', value);
					      // 在这里处理用户输入的内容
					    },
					    onCancel: () => {
					      console.log('用户取消了输入');
					    }
					  },this.phone);
					},
				confirm(data){
					this.beginTime=data.beginTime;
					this.endTime=data.endTime;
					console.log(data)
					this.$nextTick(() => {
					this.$refs.inputModal.switchTab(0);
					});
				},
		}
	}
</script>

<style scoped>
	@import "check.css";
</style>
